/*
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 17:12:55
 * @LastEditors: dh
 * @LastEditTime: 2025-10-28 16:41:52
 */
import { ref, watch, computed, watchEffect, onWatcherCleanup } from 'vue'

export default function numJS() {
	const num = ref<number>(0)
	const changeNUm = function (data: number): void {
		num.value += data
	}

	/*
	watch的返回值是watch的停止器 ,
	需要主动监听依赖数据，
	默认不会立即执行 
	*/
	const stopWatchRoom = watch(num, (newVal, oldVal) => {
		console.log('setup-watch:num', newVal, oldVal)
		if (newVal >= 5) {
			stopWatchRoom()
		}
	})
	/* TODO watchEffect
	 * 这个监听必须里面有引用响应数据
	 * 不需要手动传入依赖
	 * 默认执行一次用来自动收集依赖
	 * 无法获取到变化前的值， 只能获取变化后的值
	 * onWatcherCleanup 会先执行，调用stop还会执行一次？
	 */
	const { stop } = watchEffect(
		(onCleanup) => {
			console.log('watchEffect', num.value)
			if (num.value >= 5) {
				stop()
			}
			// onCleanup() 这是3.5之前的清理函数写法
			// 3.5之后推荐使用 onWatcherCleanup
			onWatcherCleanup(() => {
				console.log('这里的代码在更新前执行')
			})
		},
		{
			// flush: 'post', // pre 组件更新前调用，sync 同步执行，post 组件更新后执行
			onTrigger: () => {
				// 用于调试的
			},
		}
	)

	const numComputed = computed<number>(() => {
		return num.value * 2
	})

	return {
		num,
		changeNUm,
		numComputed,
	}
}
